<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->

<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->

<!--[if !IE]><!-->
<html lang="en" class="no-js">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!--<![endif]-->
<head>

	<include file="Inc/basic_css"/>

	<include file="Inc/basic_js"/>

	<import type="js" basepath="__JS__" file="admin" />

	<!-- <script src="__PLUGIN__/echart/echarts.common.js"></script> -->
	<!-- <script src="__PLUGIN__/echart/echarts.min.js"></script> -->
	<script src="__ECHARTS__/echarts.js"></script>

</head>
 <style type="text/css">

    #container {
        width: 100%;
        overflow: scroll;
        /*height: calc(100vh - 0px);*/
        height: auto;
        /*width: 1900px;*/
    }
    .carNum {
        float:left;
        width:10%;
        text-align: center;
    }
    #hour {
        width: 90%;
        /*overflow: scroll;*/
    }
    #hour div{
        width: 60px;
        float: left;
        border-left: 1px solid #fff;
        background: #ccc;
        text-align: center;
        box-sizing: border-box;
    }
    .gantt-item {
        width: 95%;
        /*border:1px solid #fff;*/
    }
    .gantt-item:hover{
        background:rgba(0,0,0,.1);
    }
    .gantt-item span {
        height: 20px;;
        display: inline-block;
        margin: 5px 0px;
        font-size: 12px;
        text-align: center;
        color:#fff;
        background:green;
    }
    .nowTime {
        /*border: 1px solid green;*/
		/*width: 95%;*/
        display: inline-block;
        height: 500px;
        height: calc(100vh - 0px);
        position: absolute;
        top: 0px;
    }
</style>
<!-- END HEAD -->

<!-- BEGIN BODY -->

<body class="page-header-fixed">

<!-- BEGIN HEADER -->

<include file="Inc/head"/>

<!-- END HEADER -->

<div class="clearfix"></div>

<!-- BEGIN CONTAINER -->

<div class="page-container">

	<!-- BEGIN SIDEBAR -->

	<include file="Inc/left"/>

	<!-- END SIDEBAR -->

	<!-- BEGIN PAGE -->

	<div class="page-content">

		<!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->

		<!-- BEGIN STYLE CUSTOMIZER -->

		<include file="Inc/theme"/>

		<!-- END BEGIN STYLE CUSTOMIZER -->

		<!-- BEGIN PAGE HEADER-->

		<div class="row">

			<div class="col-md-12">

				<!-- BEGIN PAGE TITLE & BREADCRUMB-->

				<h3 class="page-title">

					甘特图 <small>当日统计用车排期</small>

				</h3>

				<ul class="page-breadcrumb breadcrumb">

					<li><i class="fa fa-home"></i><a href="{:U('Index/index')}">首页</a> <i class="fa fa-angle-right"></i></li>

					<li><a href="#">图表统计</a><i class="fa fa-angle-right"></i></li>

					<li><a href="#">用车排期</a></li>

				</ul>					<!-- END PAGE TITLE & BREADCRUMB-->

			</div>

		</div>

		<!-- END PAGE HEADER-->

		<!-- BEGIN PAGE CONTENT-->

		<div class="row">

			<div class="col-md-12">

				<!-- BEGIN EXAMPLE TABLE PORTLET-->
				<!-- <div id="main" style="width: 97%;height:500px;"></div> -->
				<div id="container" style="background-color:#444 ">
		            <div class="carNum"  >
		                <div style="background:#ccc;">车牌号</div>
		                <foreach name='car' item='item'>
			                <div style="line-height:30px;color:#fff;">{$item.car_no}</div>
			            </foreach>
		                <!-- <div style="line-height:30px;">川A09384</div>
                        <div style="line-height:30px;">川A09384</div>
		                <div style="line-height:30px;">川A09384</div> -->
		            </div>
		            <div id="hour" style="float:right;">
		            </div>
		        </div>
			</div>

		</div>



		<!-- END PAGE CONTENT -->

	</div>



</div>

<!-- END CONTAINER -->

<!-- BEGIN FOOTER -->

<include file="Inc/foot"/>

<!-- END FOOTER -->

<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->



<!-- END CORE PLUGINS -->

<!-- BEGIN PAGE LEVEL SCRIPTS -->



<script src="__JS__/form-components.js"></script>

<script src="__JS__/app.js" type="text/javascript"></script>

<!-- <script src="__JS__/myChart.js" type="text/javascript"></script> -->

<!-- END PAGE LEVEL SCRIPTS -->

<script>

	jQuery(document).ready(function() {

		App.init(); // initlayout and core plugins

		FormComponents.init();

	});

</script>
<script type="text/javascript">
	var datainfo=[];
	$.ajax({
	    type : 'post',
	    url : "{:U('Cardate/newGanteData')}",
	    async:false, 
	    data : {},
	    dataType : 'json',
	    success : function(res){
	    	console.log(res);
	        datainfo = res.arr;
	    }
	})
	// var datainfo=[
 //                {   
 //                    innerData: [
 //                        {
 //                            start: '2019/1/21 6:23:00',
 //                            end: '2019/1/21 7:45:00',
 //                            value: 'A站点',
 //                            bg: 'green'
 //                        },
 //                        {
 //                            start: '2019/1/21 12:23:00',
 //                            end: '2019/1/21 16:45:00',
 //                            value: 'B站点',
 //                            bg: 'yellow'
 //                        },
 //                        {
 //                            start: '2019/1/21 20:00',
 //                            end: '2019/1/21 23:25',
 //                            value: 'C站点',
 //                            bg: 'blue'
 //                        }
 //                    ]
 //                },
 //                {   
 //                    innerData: [
 //                        {
 //                            start: '2019/1/21 5:23',
 //                            end: '2019/1/21 6:05',
 //                            value: 'A站点',
 //                            bg: 'blue'
 //                        },
 //                        {
 //                            start: '2019/1/21 10:23',
 //                            end: '2019/1/21 13:45',
 //                            value: 'B站点',
 //                            bg: 'green'
 //                        },
 //                        {
 //                            start: '2019/1/21 21:00',
 //                            end: '2019/1/22 3:35',
 //                            value: 'C站点',
 //                            bg: 'yellow'
 //                        },
 //                    ]
 //                },
 //                {  
 //                    innerData: [
 //                        {
 //                            start: '2019/1/21 8:23',
 //                            end: '2019/1/21 10:05',
 //                            value: 'A站点',
 //                            bg: 'blue'
 //                        },
 //                        {
 //                            start: '2019/1/21 13:23',
 //                            end: '2019/1/21 14:45',
 //                            value: 'B站点',
 //                            bg: 'green'
 //                        },
 //                        {
 //                            start: '2019/1/21 22:00',
 //                            end: '2019/1/21 23:35',
 //                            value: 'C站点',
 //                            bg: 'red'
 //                        },
 //                        {
 //                            start: '2019/1/21 06:00',
 //                            end: '2019/1/21 07:35',
 //                            value: 'D站点',
 //                            bg: 'green'
 //                        },
 //                    ]
 //                },
 //            ];
            console.log(datainfo)
        var gantt = {
            demoData: datainfo,
            // 初始化
            init: function() {
                this.showNowTime();
                this.createHours();
                this.createData();
            },
            // 创建时间
            createHours: function(){
                var startHour = 5;
                var endHour = 23;
                var html = '';
                for (let i = startHour; i< endHour; i++) {
                    html += `<div>${i < 10 ? `0${i}` : i}:00</div>`
                }
                // for (let i = 0; i< endHour; i++) {
                //     html += `<div>${i < 10 ? `0${i}` : i}:00</div>`
                // }
                document.getElementById('hour').innerHTML = html;
            },
            // 当前时间线
            showNowTime: function() {
                var date = new Date();
                var h = date.getHours(),
                    m = date.getMinutes();
                var offset = (h - 5) * 60 + m;
                var html = `<div class="nowTime" style="margin-left:${offset}px"></div>`;
                // console.log(html);
                document.getElementById('container').innerHTML += `<div class="gantt-item">${html}</div>`;
            },
            createData: function() {
                var data = this.demoData;
                var today = new Date().getDate(); // 今天的日期
                for (let m = 0; m< data.length; m++) {
                    var innerData = data[m].innerData;
                    var html = '';
                    var allLeft = 0;
                    for (let i = 0; i< innerData.length; i++) {
                        // console.log(new Date(innerData[i].start))
                        // console.log(new Date(innerData[i].end))
                        var start = new Date(innerData[i].start),
                            end = new Date(innerData[i].end),
                            start_d = start.getDate(),
                            end_d = end.getDate(),
                            start_h = start.getHours(),
                            start_m = start.getMinutes(),
                            end_h = end.getHours(),
                            end_m = end.getMinutes(),
                            left_offset = 0;
                            _left_offset = 0;
                            width = '';
                        if (start_d === (today + 1)) {
                            left_offset = ((23 - 5) * 60) + ((start_h + 1) * 60) + start_m;
                            _left_offset = left_offset - allLeft;
                            width = (((23 + (end_h + 1)) - 5) * 60 + end_m) - left_offset;
                        } else if (end_d === (today + 1)) {
                            left_offset = ((start_h - 5) * 60) + start_m;
                            _left_offset = left_offset - allLeft;
                            width = (((24 + end_h) - 5) * 60 + end_m) - left_offset;
                        } else {
                            left_offset = (start_h - 5) * 60 + start_m;
                            _left_offset = left_offset - allLeft;
                            width = ((end_h - 5) * 60 + end_m) - left_offset;
                        }
                        allLeft = left_offset + width;
                        html += `<span style="width:${width}px;margin-left:${_left_offset}px;">${innerData[i].value}</span>`;
                        console.log(html)
                    }
                    document.getElementById('container').innerHTML += `<div class="gantt-item" >${html}</div>`;
                }
            }
        }
        gantt.init();
    </script>
<script type="text/javascript">


// $(function(){
// 	var myChart = echarts.init(document.getElementById('main'));
// 	myChart.showLoading({
// 	    text: "数据正在努力加载..."
// 	});
// 	window.onresize = myChart.resize;//移动端自适应
// 	$.ajax({
// 	    type : 'post',
// 	    url : "{:U('Cardate/GanteData')}",
// 	    async:false, 
// 	    data : {},
// 	    dataType : 'json',
// 	    success : function(res){
// 	    	console.log(res);
// 	        data = res.arr;
// 	        start_=res.start;
// 	        end_=res.end; //自定义时间
// 	    }
// 	})

// 	var seriesData = [];
// 	var yAxisData_plant = []; //工厂名
// 	for(var i=0;i<data.length;i++){
// 	    var item = data[i];
// 	    yAxisData_plant.push(item.plant);
// 	    var bgColor;
// 	    for(var j=0;j<item.list.length;j++){
// 	        var listItem = item.list[j];
// 	        switch (listItem.colorNum) {
// 	            case 0:
// 	                bgColor = 'rgba(0,187,255,.4)';
// 	                break;
// 	            case 1:
// 	                bgColor = 'rgba(80,227,194,.4)';
// 	                break;
// 	            case 2:
// 	                bgColor = 'rgba(255,115,115,.4)';
// 	                break;
// 	            case 3:
// 	                bgColor = 'rgba(255,207,107,.4)';
// 	                break;
// 	            default:
// 	                bgColor = 'rgba(0,187,255,.4)'
// 	        }
// 	        var startTime = new Date(listItem.startTime).getTime();
// 	        var endTime = new Date(listItem.endTime).getTime();
// 	        seriesData.push({
// 	            name: listItem.item,
// 	            value: [
// 	                i,
// 	                startTime,
// 	                endTime,
// 	                listItem.quantity,
// 	            ],
// 	            itemStyle: {
// 	                normal: {
// 	                    color: bgColor
// 	                }
// 	            }
// 	        });
// 	    }
// 	}
// 	option = {
//         // backgroundColor: '#26263C',
//         backgroundColor: '#444444',
//         tooltip: {
//             formatter: function (params) {
//                 // console.log(params)
//                 return params.marker + params.name;
//             }
//         },
//         grid: {
//             top: 68,
//             left: 100,
//             right: 50,
//             bottom: 50,
//             height:400,
//         },
//         dataZoom: [{
//             show: true,
//             type: 'slider',
//             filterMode: 'none',
//             realtime: false,
//             height: 10,
//             top: 480,
//             startValue:new Date(start_).getTime(),
//             endValue:new Date(start_).getTime() + 3600 * 24 * 1000 * 7,
//             minValueSpan: 3600 * 24 * 1000 * 7,
//             handleIcon: 'path://path://M100, 100m -75, 0a75,75 0 1,0 150,0a75,75 0 1,0 -150,0',
//             handleSize: '120%',
//             handleStyle: {
//                 color: "#fff",
//                 shadowColor: 'rgba(0, 0, 0, 0.5)',
//                 shadowBlur: 4
//             },
//             textStyle: {
//                 color: "transparent"
//             },
//             borderColor: 'transparent',
//             backgroundColor: '#D7F4FF',
//             dataBackground: {
//                 lineStyle: {
//                     width: 0
//                 },
//                 areaStyle: {
//                     color: 'transparent'
//                 }
//             },
//             fillerColor: '#00EBFF',
//             labelFormatter: ''
//         }, {
//             type: "inside",
//             show: true,
//             zoomOnMouseWheel: false,
//             moveOnMouseWheel: true,
//             moveOnMouseMove: true,
//             preventDefaultMouseMove: true
//         }],
//         xAxis: {
//             type: 'time',
//             min: new Date(start_).getTime(),
//             max: new Date(end_).getTime(),
//             scale: true,
//             position: 'top',
//             splitNumber: 7,
//             axisLabel: {
//                 show: true,
//                 textStyle: {color: '#ffffff'},
//                 interval: 0,
//                 margin: 15,
//                 fontSize: 12,
//                 formatter:function (value, index) {
//                 	console.log(value)
//                     var date = new Date(value);
//                     // console.log(data);
//                     // var texts = [date.getFullYear(),(date.getMonth() + 1), date.getDate()].join('/');//取年月日
//                     // var texts = [date.getFullYear(),(date.getMonth() + 1), date.getDate()].join('-')+' '+[date.getHours(),date.getMinutes(), date.getSeconds()].join(':');//取时分秒
//                     // var texts = date.Format("yyyy-MM-dd HH:mm:ss");//取年月日
//                     var texts = date.Format("HH:mm:ss");//取年月日
//                     return texts;
//                 }
//             },
//             axisLine: {show: true,},
//             splitLine: {
//                 show: true,
//                 lineStyle: {color: 'rgba(233,233,233,0.1)'}
//             },
//             axisTick: {
//                 lineStyle: {
//                     color: '#fff'
//                 }
//             }
//         },
//         yAxis: {
//             axisLine: {
//                 onZero: false,
//                 show: false
//             },
//             axisLabel: {
//                 show: true,
//                 textStyle: {color: '#ffffff'},
//                 fontSize: 14
//             },
//             splitLine: {
//                 show: true,
//                 lineStyle: {color: 'rgba(233,233,233,0.1)'}
//             },
//             inverse: true,
//             data: yAxisData_plant
//         },
//         series: [{
//             type: 'custom',
//             renderItem: function (params, api) {
//                 var categoryIndex = api.value(0);
//                 var start = api.coord([api.value(1), categoryIndex]);
//                 var end = api.coord([api.value(2), categoryIndex]);
//                 var height = api.size([0, 1])[1] * 0.6;
//                 var rectShape = echarts.graphic.clipRectByRect({
//                     x: start[0],
//                     y: start[1] - 5,
//                     width: end[0] - start[0],
//                     height: 20
//                 }, {
//                     x: params.coordSys.x,
//                     y: params.coordSys.y,
//                     width: params.coordSys.width,
//                     height: params.coordSys.height
//                 });

//                 return rectShape && {
//                     type: 'rect',
//                     shape: rectShape,
//                     style: api.style()
//                 };

//             },
//             encode: {
//                 x: [1, 2],
//                 y: 0
//             },
//             data: seriesData
//         }]
//     }
//     // console.log(option);
//     myChart.setOption(option);
// 	myChart.hideLoading(); //关闭提示
// })

Date.prototype.Format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "H+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
</script>

<!-- END PAGE LEVEL SCRIPTS -->

</body>

<!-- END BODY -->

</html>